<script lang="ts">
import {defineComponent} from 'vue'
import DialogAndBlock from "@/components/DialogAndBlock/index.vue";
import {EditDirItem, EditDirOptions} from "@/config/options";
import DynamicForm from "@/components/DynamicForm3/index.vue";
import {FormConfigItem} from "@/components/DynamicForm3/types";
import editDirMixin from "@/mixins/editDirMixin";
import {userReq} from "@/api/user";
import {ElMessage, ElMessageBox} from "element-plus";
import {StringUtils} from "@/utils/StringUtils";
import {deepClone} from "@/utils";
import SelectBasePath from "@/components/SelectBasePath/index.vue";

export default defineComponent({
  name: "DialogUser",
  components: {SelectBasePath, DynamicForm, DialogAndBlock},
  mixins: [editDirMixin],
  data(){
    return {
      rolesOptions: [],
      formData: {},
      formConfigList: [
        {
          label: '用户名',
          prop: 'username',
          type: 'input',
          props: {
            clearable: true,
          }
        },
        {
          label: '密码',
          prop: 'password',
          type: 'input',
          hidden: false,
          props: {
            type: 'password',
            clearable: true,
          }
        },
        {
          label: '文件基础路径',
          prop: 'userpath',
          type: 'slot',
          slotInitValue:(formData, item)=>{
            return '/'
          }
        },
        {
          label: '角色',
          prop: 'roleName',
          type: 'checkbox',
          props: {
            options: [],
          },
          initValue: [this.rolesOptions?.[1] || 'other']
        },
        {
          label: '权限',
          prop: 'auths',
          type: 'checkbox',
          props: {
            options: [],
            multiple: true,
          },
        },
      ] as FormConfigItem[],
      authsOptions: [],
    }
  },
  emits:['success'],
  created() {
    userReq.getRoleList().then(res=>{
      this.rolesOptions = res.data
      let item = this.formConfigList.find(i=>i.prop === 'roleName') as FormConfigItem
      item.props.options = this.rolesOptions.map(i=>{
        return {
          label: i,
          value: i
        }
      })
    })
    userReq.getAuthList().then(res=>{
      this.authsOptions = res.data
      let item = this.formConfigList.find(i=>i.prop === 'auths') as FormConfigItem
      item.props.options = this.authsOptions
    })
  },
  methods: {
    async open(edirDir=EditDirOptions.add,row){
      this.edirDir = edirDir
      this.formData = row || {}
      this.$refs.dialogRef.open()
      await this.$nextTick()
      if(this.isAddDir) {
        await this.$refs.DynamicFormRef.resetFields()
      }
      let find = this.formConfigList.find(i=>i.prop === 'password');
      find.hidden=!this.isAddDir
      if(!this.isAddDir) {
        userReq.getUserById(row.userId).then(res=>{
          this.formData = res.data
          this.formData.auths = res.data.auths?.split(StringUtils.split) || []
          this.formData.roleName = res.data.roleName?.split(StringUtils.split) || []
        })
      }
    },
    closed(){
      this.$refs.DynamicFormRef.resetFields()
    },
    async confirm(){
      await ElMessageBox.confirm("是否提交","提示")
      const formData  = deepClone(this.formData)
      formData.auths = formData.auths?.join(StringUtils.split) || ''
      formData.roleName = formData.roleName?.join(StringUtils.split) || ''
      if(this.isAddDir) {
        let res=await userReq.addUser(formData)
        ElMessage.success(res.data as string)
        this.$emit('success')
      } else {
        let res=await userReq.updateUser(formData)
        ElMessage.success(res.data as string)
        this.$emit('success')
      }
      this.$refs.dialogRef.close()
      await this.$refs.DynamicFormRef.resetFields()
    }
  }
})
</script>

<template>
  <DialogAndBlock
    :title="showTitle + '用户'"
    ref="dialogRef"
    @closed="closed"
  >
    <DynamicForm
      ref="DynamicFormRef"
      v-model="formData"
      :form-config-list="formConfigList"
      label-position="top"
      :created-init-value="false"
      :disabled="isLookDir"
    >
      <template #userpath="{item}">
        <SelectBasePath
          v-model="formData[item.prop]"
        ></SelectBasePath>
      </template>
    </DynamicForm>
    <div v-if="!isLookDir" class="btns">
      <el-button type="primary"
                 @click.stop="confirm"
      >确定
      </el-button>
    </div>
  </DialogAndBlock>
</template>

<style scoped lang="scss">
.btns{
  text-align: right;
}
</style>
